<template>
	<el-container class="container" direction="vertical">
		<MixinLayoutNavbar v-if="currentLayout === 'mixin'" :menu="rootMenus" @menuCallback="handleMenuCallback" />
		<LayoutNavbar v-else />
		<el-container>
			<BaseLayoutSidier v-model="collapsed" :menu="menuForSidier" />
			<el-container class="sub-layout" direction="vertical">
				<BaseLayoutSubHeader />
				<el-main class="sub-content">
					<!-- view container -->
					<RouterView />
				</el-main>
			</el-container>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useThemeStore, useAuthStore } from '@/stores';
import { storeToRefs } from 'pinia';
import useRouteHook from '@/hooks/admin/useRouteHook';
import usePermissionHook from '@/hooks/admin/usePermissionHook';
import LayoutNavbar from '@/layouts/navbar/LayoutNavbar.vue';
import MixinLayoutNavbar from '@/layouts/navbar/MixinLayoutNavbar.vue';
import BaseLayoutSidier from '@/layouts/BaseLayoutSidier.vue';
import BaseLayoutSubHeader from '@/layouts/BaseLayoutSubHeader.vue';

const { currentLayout } = storeToRefs(useThemeStore());

const collapsed = ref(false);
const { parentRoute } = useRouteHook();

const { authRoutes } =  storeToRefs(useAuthStore());
const menus = ref([]);
const { formatPermissions } = usePermissionHook();
onMounted(() => {
	menus.value = formatPermissions(authRoutes.value);
});
// mixin布局相关变量
const rootMenus = computed(() => {
	return menus.value.filter((item:any) => Number(item.parentId) === 0)
	.map((item: any) => ({ ...item, children: undefined }));
});
const childrenMenus = ref<(typeof MenuProps)['items']>([]);
const handleMenuCallback = (menuId: string) => {
	const targetMenu = menus.value.find((item:any) => item.id === menuId);
	childrenMenus.value = targetMenu.children || [];
};

// 获取当前布局为baseSider时，需要展示的菜单
// 如果是mixin布局，则展示子菜单
// 如果是baseSider布局，则展示所有菜单
const menuForSidier = computed(() => {
  return currentLayout.value === 'mixin' ? childrenMenus.value : menus.value;
});
console.log('menus.value', menus.value);
</script>

<style scoped lang="scss">
.container {
	height: 100vh;
	.sub-layout {
		.sub-content {
			box-sizing: border-box;
			padding: 8px 16px;
		}
	}
}
</style>